import { Image, Text, View } from "@tarojs/components"
import React from "react"
import "./index.scss"

const UserCenter = () => {

  const userInfo = {
    userName:"邱大厨子",
    desc:"一个小厨子",
    avatar:require("../../images/1.png")
  }

  const statistical = [
    {
      id:0,
      count:758,
      title:"健康食谱"
    },
    {
      id:1,
      count:642,
      title:"菜谱"
    },
    {
      id:2,
      count:856,
      title:"浏览量"
    }
  ]

  return(
    <>
      <View className='user-container'>
        <View className='box'>
          <View className='userInfo'>
            <Image className='avatar' src={userInfo.avatar} />
            <View className='userName'>
              <Text>{userInfo.userName}</Text>
              <Text>{userInfo.desc}</Text>
            </View>
          </View>
          <View className='data'>
            {
              statistical.map((item)=>(
                <View className='fl' key={item.id}>
                  <Text>{item.count}</Text>
                  <Text>{item.title}</Text>
                </View>
              ))
            }
          </View>
        </View>
      </View>
    </>
  )
}


export default UserCenter
